import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { compose } from 'ramda';
import { createFragmentContainer } from 'react-relay';
import graphql from 'babel-plugin-relay/macro';
import { withStyles } from '@material-ui/core/styles';
import Grid from '@material-ui/core/Grid';
import inject18n from '../../../components/i18n';
import VulnerabilityHeader from './VulnerabilityHeader';
import VulnerabilityOverview from './VulnerabilityOverview';
import VulnerabilityEdition from './VulnerabilityEdition';
import EntityLastReports from '../report/EntityLastReports';
import EntityStixRelationsChart from '../stix_relation/EntityStixRelationsChart';
import EntityReportsChart from '../report/EntityReportsChart';
import EntityStixRelationsPie from '../stix_relation/EntityStixRelationsPie';

const styles = () => ({
  container: {
    margin: 0,
  },
  gridContainer: {
    marginBottom: 20,
  },
});

class VulnerabilityComponent extends Component {
  render() {
    const { classes, vulnerability, t } = this.props;
    return (
      <div className={classes.container}>
        <VulnerabilityHeader vulnerability={vulnerability} />
        <Grid
          container={true}
          spacing={3}
          classes={{ container: classes.gridContainer }}
        >
          <Grid item={true} xs={6}>
            <VulnerabilityOverview vulnerability={vulnerability} />
          </Grid>
          <Grid item={true} xs={6}>
            <EntityLastReports entityId={vulnerability.id} />
          </Grid>
        </Grid>
        <Grid
          container={true}
          spacing={3}
          classes={{ container: classes.gridContainer }}
          style={{ marginTop: 30 }}
        >
          <Grid item={true} xs={4}>
            <EntityStixRelationsChart
              entityId={vulnerability.id}
              relationType="targets"
              resolveInferences={true}
              resolveRelationType="attributed-to"
              resolveRelationRole="origin"
              title={t('Number of target relations')}
            />
          </Grid>
          <Grid item={true} xs={4}>
            <EntityStixRelationsPie
              entityId={vulnerability.id}
              entityType="Stix-Domain-Entity"
              field="entity_type"
            />
          </Grid>
          <Grid item={true} xs={4}>
            <EntityReportsChart entityId={vulnerability.id} />
          </Grid>
        </Grid>
        <VulnerabilityEdition vulnerabilityId={vulnerability.id} />
      </div>
    );
  }
}

VulnerabilityComponent.propTypes = {
  vulnerability: PropTypes.object,
  classes: PropTypes.object,
  t: PropTypes.func,
};

const Vulnerability = createFragmentContainer(VulnerabilityComponent, {
  vulnerability: graphql`
    fragment Vulnerability_vulnerability on Vulnerability {
      id
      ...VulnerabilityHeader_vulnerability
      ...VulnerabilityOverview_vulnerability
    }
  `,
});

export default compose(
  inject18n,
  withStyles(styles),
)(Vulnerability);
